import logo from './logo.svg';
import './App.css';
import React from 'react';
import axios from 'axios';
import NewsCom from './pages/newsCom/newsCom';
import EpidemicCom from './pages/epidemicCom/epidemicCom';
import answerCom from './pages/answerCom/answerCom';
// history模式
import {BrowserRouter as Router,Link,Route,Redirect,Switch} from 'react-router-dom';
// 定义根组件App组件
class App extends React.Component{
  constructor(props){
    super(props);
    this.state={
      epidemicData:null,
      newsData:null,
      OverSeasEpidemicData:null,
      trafficTopicData:null,
      listItem:['疫情实时','热点新闻'],
      tabIndex:0,
      tabStyle:['tab_item active','tab_item '],
      lineLeft:10+'%',
      contentStyle:'translate(0,0)',
      isloading:false,
      imgHeight:0,
      isGetImgHeight:false,
      // comisShow:window.isShow?true:true
      //是否显示关于答题页面的相关组件
      trafficPageShow:'block',
    };
    // this.componentWillMount = this.componentWillMount.bind(this);
  };
  async componentWillMount(){
    let epidemicData = await axios.get('http://localhost:80/getEpidemicData');
    let newsData = await axios.get('http://localhost:80/getNews');
    let OverSeasEpidemicData = await axios.get('http://localhost:80/getOverSeasEpidemicData');
    let trafficTopicData = await axios.get('http://localhost:80/getTrafficData');
    // console.log('获取的疫情数据：',epidemicData)
    // console.log('获取的新闻数据：',newsData)
    //  console.log('获取的海外疫情数据：',OverSeasEpidemicData)
      // console.log('获取的驾照题库数据：', trafficTopicData)
    this.setState({
      epidemicData:epidemicData,
      newsData:newsData,
      OverSeasEpidemicData:OverSeasEpidemicData,
      trafficTopicData:trafficTopicData,
      isloading:true,
    })
    // 监听窗口尺寸变化
    window.onresize=()=>{
      this.setState({
        isGetImgHeight:false
      });
    }
  };
  componentDidUpdate(){
    let {isloading} = this.state;
    if(isloading && !this.state.isGetImgHeight){
      let imgHeight = document.getElementById('imgWrap').firstChild.height;
      this.setState({
        isGetImgHeight:true
      });
      window.localStorage.setItem('imgHeight',imgHeight);
      // console.log('imgHeight=>', imgHeight)
    }
  }
  tabChange(index){
    console.log(index);
    if(index==0){
      this.setState({
        tabStyle:['tab_item active','tab_item'],
        lineLeft:10+"%",
        contentStyle:'0'
      });
    }else if(index==1){
      this.setState({
        tabStyle:['tab_item','tab_item active'],
        lineLeft:60+'%',
        contentStyle:'-100vw'
      });
    }

  };
  otherPageHide(){
    console.log('this is otherPageHide func')
  }
  render(){
    let {isloading} = this.state;
    let toObj ={
      pathname:'/trafficCom',//跳转的路径
      search:'',//get请求的参数
      hash:'',//设置的hash值
      state:{
        trafficPageShow:this.state.trafficPageShow
      }//传入组件的数据
    }
    if(isloading){
        return(
          <div>
            <div className='appTopHead' id='imgWrap'>
                  <img src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fuploads.xuexila.com%2Fallimg%2F1708%2F1014262522-11.jpg&refer=http%3A%2F%2Fuploads.xuexila.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626058862&t=2cd84842333ed8bd2917a4061d3f801f'/>
            </div>
            {/* tab切换开始 */}
            <div className='tabWap'>
              {this.state.listItem.map((item,index)=>{
                return (
                  <span className={this.state.tabStyle[index]} key={index} onClick={()=>{this.tabChange(index)}}>{item}</span>
                )
              })}
              <span className='animation_line' style={{left:this.state.lineLeft}}></span>
            </div>
            {/* tab切换结束 */}
            {/* 页面组件开始 */}
            <div className='childComWrap'>
              <div style={{color:'white',left:this.state.contentStyle}}   className='componentWrap'>
                <EpidemicCom  epideData={this.state.epidemicData} OverSeasEpidemicData={this.state.OverSeasEpidemicData} ></EpidemicCom>
                <NewsCom  newsData={this.state.newsData} />
              </div>
            </div>
            {/* 页面组件结束 */}
          </div>
        )
    }else{
      return(
        <div className='loading'>加载中...</div>
      )
    }
    
  }
}

export default App;
